<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 引入css样式表和设置图标  -->
<link rel="icon" href="./images/logoWeb.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">

<style type="text/css">
html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
}

.my-container {
	width: 100%;
	height: 100%;
	background: white;
	display: flex;
	flex-direction: row;
}

.my-nav {
	flex: none; /*当本元素处于flex容器中时，保持原有大小，不伸缩*/
	width: 220px;
	height: 100%;
	background-color: white;
	border-right: 1px solid #DDDDDD;
}

.my-icon {
	font-size: 20px;
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.my-main {
	flex: auto; /*当本元素处于flex容器中时，自动伸缩*/
	background-color: white;
	display: flex;
	flex-direction: column;
}

.my-top {
	flex: none;
	width: 100%;
	height: 50px;
	display: flex;
	flex-direction: row;
	position: relative; /*相对定位，定位基准点*/
}

.my-content {
	flex: auto;
	width: 100%;
}

.my-contentFrame {
	width: 100%;
	height: 100%;
	border: none;
}

.my-bottom {
	flex: none;
	width: 100%;
	height: 50px;
	line-height: 50px;
}

.title {
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.fade-enter-active, .fade-leave-active {
	
}

.fade-enter, .fade-leave-to {
	width: 0;
}
</style>

<title>学生管理系统</title>
</head>
<body>

	<div id="app" class="my-container">

		<!-- 导航栏开始 -->

		<!-- transition过渡效果，表示：0.5秒之后，将宽度设置为0px -->
		<transition name="fade"> <!-- v-show="navShow" 表示：如果navShow为true，则该div显示，否则不显示 -->
		<div v-show="navShow" class="my-nav" id="accordionExample">
			<!-- 图标名称 -->
			<div class="my-icon">
				<img width="100%" height="100%" alt="" src="images/logo.png">
			</div>
			<div class="list-group">
				<!-- 信息管理 -->
				<!-- data-toggle="collapse 表示：是否折叠" data-target:"??"表示：折叠目标 -->
				<a href="#" class="list-group-item list-group-item-action border-0"
					data-toggle="collapse" data-target="#my-info"> <i
					class="fa fa-address-book-o pr-2" aria-hidden="true"></i> 学生信息管理 <i
					class="fa fa-angle-right pl-4" aria-hidden="true"></i>
				</a>
				<!-- 信息管理子菜单开始 -->
				<div id="my-info" class="list-group pl-4 collapse">
					<a href="dep.html" target="contentFrame"
						@click="chooseMenu('信息管理','学籍管理')"
						class="list-group-item list-group-item-action border-0"> 学籍管理

					</a> <a href="grade.html" target="contentFrame" @click="chooseMenu('信息管理','成绩管理')"
						class="list-group-item list-group-item-action border-0">成绩管理</a>
				</div>
				<!-- 信息管理子菜单结束 -->
				<!-- 系统管理 -->
				<a href="#" data-toggle="collapse" data-target="#my-system"
					class="list-group-item list-group-item-action border-0"> <i
					class="fa fa-cube pr-2" aria-hidden="true"></i> 违纪管理&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i
					class="fa fa-angle-right pl-4" aria-hidden="true"></i>

				</a>
				<!-- 系统管理子菜单开始 -->
				<div id="my-system" class="list-group pl-4 collapse ">
					<a href="error.html" target="contentFrame" @click="chooseMenu('系统管理','成绩管理')"
						class="list-group-item list-group-item-action border-0"> 违规违纪

					</a>
				</div>
				<!-- 系统管理子菜单结束 -->

				<!-- 个人信息 -->
				<a href="#" data-toggle="collapse" data-target="#my-myInfo"
					class="list-group-item list-group-item-action border-0"> <i
					class="fa fa-user-circle-o pr-2" aria-hidden="true"></i></i>
					管理员信息&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-right pl-4"
					aria-hidden="true"></i>

				</a>
				<!-- 系统管理子菜单开始 -->
				<div id="my-myInfo" class="list-group pl-4 collapse ">
					<a href="updUser.html" target="contentFrame" @click="chooseMenu('个人信息','密码修改')"
						class="list-group-item list-group-item-action border-0">密码修改</a>
				</div>
				<!-- 系统管理子菜单结束 -->
				<div class="title">
					<div style="width: 90%; height: 1px; background-color: #ededed;"></div>
					<div style="font-size: 13px; margin-top: 20px;">开发小组：No.1
						好好学就队</div>
				</div>
			</div>
		</div>
		</transition>
		<!-- 导航栏结束 -->

		<div id="" class="my-main">
			<div class="my-top bg-light">
				<button @click="switchNav" type="button"
					class="btn btn-light rounded-0 m-1">
					<i class="fa fa-bars" aria-hidden="true"></i>
				</button>

				<nav>
					<ol class="breadcrumb bg-light">
						<li class="breadcrumb-item">学生管理系统</li>
						<!-- v-if="currentMenu.one" 表示： 当前是否存在选中的一级菜单，若存在，则生成当前元素-->
						<li v-if="currentMenu.one" class="breadcrumb-item">{{currentMenu.one}}</li>
						<li v-if="currentMenu.two" class="breadcrumb-item active">{{currentMenu.two}}</li>
					</ol>
				</nav>
				<div style="position: absolute; right: 10px; line-height: 50px;">
					<!-- @click.prevent="logout"  表示单击时阻止组件的默认行为（超链接跳转）  -->
					<span class="mr-2">当前用户：<a>{{currUser.user_name}}</a></span> <a
						@click.prevent="logout" href="#">退出<i class="fa fa-sort-desc pl-1 pb-1"
						aria-hidden="true"></i></a>
				</div>
			</div>
			<!-- iframe：内嵌框架，即窗口中的窗口 -->
			<div class="my-content">
				<iframe name="contentFrame" class="my-contentFrame"></iframe>
			</div>
			<div class="my-bottom text-center">技术支持：&copy;开发小组：No.1好好学就队</div>
		</div>
	</div>


	<!-- 引入js文件 -->
	<script src="./js/jquery.slim.min.js"></script>
	<script src="./js/popper.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./layer/layer.js"></script>
	<script src="./js/sweetalert2.all.min.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/vue.min.js"></script>
	<script src="./js/request.js"></script>
	<script language="JavaScript">
		javascript:window.history.forward(1);
	</script>

	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				navShow:true, //导航是否显示，用变量控制导航是否显示
				currentMenu:{ //当前选中的菜单
					one:'',
					two:''
				},
				currUser:{},//当前用户信息
			},
			methods:{
				//切换是否显示nav
				switchNav(){
					//将navShow置反
					this.navShow = !this.navShow;
				},
				//选中菜单
				chooseMenu(one,two){
					this.currentMenu = {one,two};
				},
				//退出登录
				logout(){
					http_post('logout',{},{postMsg:true}).then(()=>{
						window.sessionStorage.removeItem('CurrUser'); //清除当前用户信息
						window.location.href='login.html';
					})
				}
			},
			mounted(){
				const currUserStr = window.sessionStorage.getItem("CurrUser");
				//将字符串解析为对象
				this.currUser = JSON.parse(currUserStr)
			}
		})
	</script>


</body>
</html>